<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .d1{
                width:100px;
                height:100px;
                border:1px solid red;
            }
        </style>
        <script>
            function  f1() {
                console.log("鼠标双击事件");
            }
            function  f2() {
                console.log("鼠标往下按的时候");
            }
            function  f3() {
                console.log("当鼠标被移动时触发");
            }
            function f4(){
                console.log("当鼠标移动到某个元素上时触发");
            }
            function f5(){
                console.log("当鼠标从某个元素上移开时触发");
            }
            function f6(){
                console.log("当鼠标的按键被松开时触发");
            }

            //键盘事件的执行顺序:keydown--->keypress--->keyup
            function f7(){
                console.log("keydown");
            }
            function f8(){
                console.log("keypress");
            }
            function f9(){
                console.log("keyup");
            }
        </script>
    </head>
    <body>
        <div class="d1" ondblclick="f1()">div</div>
        <div class="d1" onmousedown="f2()">div</div>
        <div class="d1" onmousemove="f3()">div</div>
        <div class="d1" onmouseover="f4()" onmouseout="f5()"></div>
        <div class="d1" onmouseup="f6()">div</div>
        <input type="text" onkeydown="f7()" onkeypress="f8()" onkeyup="f9()">

    </body>
</html>